<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>VLOG</title>
	<script src="./live2d/js/L2Dwidget.min.js"></script>
	<script src="./live2d/js/L2Dwidget.0.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<style type="text/css">
		/* The magic */
		.col {
		  overflow: hidden;
		  position: relative;
		}

		.slide {
		  position: absolute;
		  top: 0;
		  right: 0;
		  bottom: 0;
		  left: 0;
		  /* 
		    Visibility delay gives the previously hovered element time to slide out before disappearing.
		    Remove the `visibility` transition to slide in current element without sliding out previous element
		  */
		  -webkit-transition: all 0.275s ease-in-out, visibility 0s 0.275s;
		  transition: all 0.275s ease-in-out, visibility 0s 0.275s;
		  visibility: hidden;
		  will-change: transform;
		  -webkit-transform: translateY(100%);
		          transform: translateY(100%);
		}

		.row:hover ~ .row .slide {
		  -webkit-transform: translateY(-100%);
		          transform: translateY(-100%);
		}
		.row:hover .slide {
		  -webkit-transform: translateX(100%);
		          transform: translateX(100%);
		}
		.row:hover .col:hover ~ .col .slide {
		  -webkit-transform: translateX(-100%);
		          transform: translateX(-100%);
		}
		.row:hover .col:hover .slide {
		  -webkit-transform: none;
		          transform: none;
		  visibility: visible;
		  -webkit-transition-delay: 0s;
		          transition-delay: 0s;
		}

		/* Pen styling */
		* {
		  box-sizing: border-box;
		}

		/*body {
		  background: #fefefe;
		  color: #333;
		  font: 14px /1.5 "Fira Sans", sans-serif;
		}

		h1 {
		  font-size: 2.5rem;
		  font-weight: 300;
		  margin: 1.5em 0.5rem 1em;
		  text-align: center;
		}*/

		.container {
		  margin: 0 auto;
		  padding: 2rem;
		  max-width: 1200px;
		}

		.row {
		  display: -webkit-box;
		  display: -ms-flexbox;
		  display: flex;
		}

		.col {
		  color: #fff;
		  -webkit-box-flex: 1;
		      -ms-flex: 1 1 auto;
		          flex: 1 1 auto;
		  min-height: 260px;
		  position: relative;
		}
		.col h2 {
		  font-weight: 300;
		  font-size: 1.33333rem;
		  line-height: 1.25;
		  margin: 0;
		  position: absolute;
		  bottom: 1.5rem;
		  right: 1.5rem;
		  z-index: 0;
		}

		.col:nth-child(2) {
		  min-width: 20%;
		}

		.col:nth-child(4) {
		  min-width: 33%;
		}

		.col:nth-child(3) + .col:nth-child(3) {
		  min-width: 50%;
		}

		.photo-container {
		  background: #0f0523 50% 50% / cover;
		  position: absolute;
		  top: 0;
		  right: 0;
		  bottom: 0;
		  left: 0;
		  -webkit-transition: 1s;
		  transition: 1s;
		  -webkit-transform-origin: bottom right;
		          transform-origin: bottom right;
		}
		.photo-container::before {
		  background: -webkit-linear-gradient(transparent, rgba(67, 17, 51, 0.5), #000320);
		  background: linear-gradient(transparent, rgba(67, 17, 51, 0.5), #000320);
		  content: '';
		  position: absolute;
		  top: 0;
		  right: 0;
		  bottom: 0;
		  left: 0;
		}
		.col:hover .photo-container {
		  -webkit-transform: scale(1.25);
		          transform: scale(1.25);
		}

		.slide {
		  background: rgba(25, 1, 21, 0.8);
		  padding: 0 1.5rem;
		}
	</style>
</head>
<body>
	<div class="htmleaf-container">
		<div class="container">
			<div class="row">
				<div class="col">
					<div class="photo-container" style="background-image:url(img/14.jpg)"></div>
					<h2> </h2>
					<div class="slide">
						<p>参观杨柳青画社,木雕工艺技术-1</p>
					</div>
				</div>
				<div class="col">
					<div class="photo-container" style="background-image:url(img/15.jpg)"></div>
					<h2> </h2>
					<div class="slide">
						<p>参观杨柳青画社,木雕工艺技术-2</p>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col">
					<div class="photo-container" style="background-image:url(img/16.jpg)"></div>
					<h2> </h2>
					<div class="slide">
						<p>杨柳青年画成品,关公战秦琼</p>
					</div>
				</div>
				<div class="col">
					<div class="photo-container" style="background-image:url(img/17.jpg)"></div>
					<h2> </h2>
					<div class="slide">
						<p>杨柳青年画成品,海河锦鲤</p>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col">
					<div class="photo-container" style="background-image:url(img/18.jpg)"></div>
					<h2> </h2>
					<div class="slide">
						<p>天津杨柳青传承人</p>
					</div>
				</div>
			</div>
		  <div class="row">
		    <div class="col">
		      <div class="photo-container" style="background-image:url(img/1.jpg)"></div>
		      <h2> </h2>
		      <div class="slide">
		        <p>我女朋友!</p>
		      </div>
		    </div>
		    <div class="col">
		      <div class="photo-container" style="background-image:url(img/2.jpg)"></div>
		      <h2> </h2>
		      <div class="slide">
		        <p>Quam molestiae ipsa sapiente mollitia, nobis.</p>
		      </div>
		    </div>
		    <div class="col">
		      <div class="photo-container" style="background-image:url(img/3.jpg)"></div>
		      <h2> </h2>
		      <div class="slide">
		        <p>Autem possimus perspiciatis, eaque quos repudiandae modi labore sed repellat dolorum magnam praesentium expedita esse tempore saepe nulla.</p>
		      </div>
		    </div>
		    <div class="col">
		      <div class="photo-container" style="background-image:url(img/4.jpg)"></div>
		      <h2> </h2>
		      <div class="slide">
		        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		      </div>
		    </div>
		  </div>
		  <div class="row">
		    <div class="col">
		      <div class="photo-container" style="background-image:url(img/5.jpg)"></div>
		      <h2> </h2>
		      <div class="slide">
		        <p>Veritatis eos similique eveniet tempora.</p>
		      </div>
		    </div>
		    <div class="col">
		      <div class="photo-container" style="background-image:url(img/6.jpg)"></div>
		      <h2> </h2>
		      <div class="slide">
		        <p>Doloremque quisquam molestias, est laudantium vero aliquid dolorum inventore atque sint perferendis qui dolor voluptas consequuntur non.</p>
		      </div>
		    </div>
		    <div class="col">
		      <div class="photo-container" style="background-image:url(img/7.jpg)"></div>
		      <h2> </h2>
		      <div class="slide">
		        <p>Facere illo pariatur necessitatibus fugit quo impedit, quae, corporis placeat recusandae dolor ipsa nobis!</p>
		      </div>
		    </div>
		    <div class="col">
		      <div class="photo-container" style="background-image:url(img/8.jpg)"></div>
		      <h2> </h2>
		      <div class="slide">
		        <p>Quam molestiae ipsa sapiente mollitia, nobis.</p>
		      </div>
		    </div>
		    <div class="col">
		      <div class="photo-container" style="background-image:url(img/9.jpg)"></div>
		      <h2> </h2>
		      <div class="slide">
		        <p>Autem possimus perspiciatis, eaque quos repudiandae modi labore sed repellat dolorum magnam praesentium expedita esse tempore saepe nulla.</p>
		      </div>
		    </div>
		    <div class="col">
		      <div class="photo-container" style="background-image:url(img/10.jpg)"></div>
		      <h2> </h2>
		      <div class="slide">
		        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		      </div>
		    </div>
		  </div>
		  <div class="row">
		    <div class="col">
		      <div class="photo-container" style="background-image:url(img/11.jpg)"></div>
		      <h2> </h2>
		      <div class="slide">
		        <p>Autem possimus perspiciatis, eaque quos repudiandae modi labore sed repellat dolorum magnam praesentium expedita esse tempore saepe nulla.</p>
		      </div>
		    </div>
		    <div class="col">
		      <div class="photo-container" style="background-image:url(img/12.jpg)"></div>
		      <h2> </h2>
		      <div class="slide">
		        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		      </div>
		    </div>
		  </div>
		  <div class="row">
		    <div class="col">
		      <div class="photo-container" style="background-image:url(img/13.jpg)"></div>
		      <h2> </h2>
		      <div class="slide">
		        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		      </div>
		    </div>
		  </div>

		</div>
		<div class="related" style="margin-bottom: 50px">
		    <a href="http://beian.miit.gov.cn" target="_blank" style="color: white">津ICP备18001664号-1</a>
		</div>
		<script>

            var modelname = 'shizuku';

            L2Dwidget.init({
                "model":{
                    "scale":1,"hHeadPos":0.5,"vHeadPos":0.618,
                    "jsonPath":"./live2d/packages/live2d-widget-model-"+modelname+"/assets/"+modelname+".model.json"
                },
                "display":{
                    "superSample":2,"width":100,"height":220,"position":"right","hOffset":20,"vOffset":-20
                },
                "mobile":{
                    "show":false,"scale":0.5
                },
                "react":{
                    "opacityDefault":0.7,"opacityOnHover":0.2
                }
            });
		</script>
		<div id="live2d-widget">
			<canvas id="live2dcanvas" width="200" height="440"
					style="position: fixed; opacity: 1; right: 0; bottom: 0; z-index: 99999; pointer-events: none;"></canvas>
		</div>
	</div>
	
</body>
</html>